<template>
    <div class="content">
        <div class="header">
            <div class="left" @click="showLeft = true">
                <i class="iconfont icon-gengduo icons"></i>
            </div>
            <div class="right" @click="$router.push('/setView')">
                <i class="iconfont icon-shezhi icons"></i>
            </div>
        </div>
        <div class="bodys">
            <van-image src="https://cdn7.axureshop.com/demo2024/1212098/images/%E6%88%91%E7%9A%84/u6348.png"
                @click="btnClick"></van-image>
            <span class="username_class">{{ username }}</span>
            <span>{{ bio }}</span>
        </div>

       <div class="bottom">

       </div>
        <!-- 左侧弹出 -->
        <van-popup class="tan" v-model:show="showLeft" position="left" :style="{ width: '80%', height: '100%' }">
            <!-- <ul>
                <li v-for="item, index in datas" :key="index" class="titles">
                    <div class="left">
                        <i :class="item.ions" class="icons"></i>
                        <span>{{ item.title }}</span>
                    </div>
                    <div class="rigt">
                        <i :class="item.right" class="right-icons"></i>
                    </div>
                </li>
            </ul> -->
            <setCom :items="datas" />
        </van-popup>


    </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
const showLeft = ref(false)
import setCom from '@/components/setCom/setCom.vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const username = localStorage.getItem('username') || ''
const bio = localStorage.getItem('bio') || ''

const datas = [
    { title: '我的订单', icon: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
    { title: '我的收藏', icon: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
    { title: '旅行计划', icon: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
    { title: '红包卡卷', icon: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
    { title: '我的订单', icon: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
]


// 点击编及用户界面
function btnClick() {
    console.log('iiiiiiii')
    router.push('/editUserView')
}

</script>









<style lang="scss" scoped>
.content {
    background-color: #3e64ff;
    height: 100%;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.4rem;

    .icons {
        font-size: 0.17rem;
    }

    .left {
        padding-left: 0.4rem;
    }

    .right {
        padding-right: 0.4rem;
    }
}

.bodys {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 0.3rem;
    color: white;

    .van-image {}

    .username_class {
        font-size: 0.2rem;
    }
}

.tan {
    cursor: pointer;

    .titles {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .left {
        padding: 0.15rem;
        font-size: 0.18rem;

        .icons {
            background: #3e64ff;
            color: white;
            border-radius: 50%;
            padding: 0.08rem;
            font-size: 0.18rem;
            margin-right: 0.05rem;
        }
    }

    .rigt {
        .right-icons {
            font-size: 0.15rem;
            padding-right: 0.04rem;
        }

    }
}
.bottom{
   background-color: red;
    height: 3rem;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

</style>